<div id="loading_modal" class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Please wait...</h3>
  </div>
  <div class="modal-body">
    {{if settings.loading_video:}}
    <video id="loadingvid" controls="controls" loop="loop" style="max-width:inherit;">
        <source src="{{=URL('static', settings.loading_video)}}" type="video/mp4"/>
        Your browser does not support the video tag.
    </video>
    {{else:}}
    <div class="progress progress-striped active">
        <div class="bar" style="width: 100%;"></div>
    </div>
    {{pass}}
  </div>
</div>

<hr>

<script>

$(document).ready(function() {

    //document.getElementById('loadingvid').pause();

    {{if settings.loading_video:}}
    jQuery('#loading_modal').on('show', function() {
        document.getElementById('loadingvid').play();
    });

    jQuery('#loading_modal').on('hide', function() {
        document.getElementById('loadingvid').pause();
    });
    {{pass}}

    jQuery('input[type="submit"]').click( function() {
      jQuery('form').submit();
      jQuery("#loading_modal").modal('show');
    });

});
</script>